<template>
    <div class="discover">
        <div class="header">
            <span>发现</span>
           <a href="javascript:;"><img src="../assets/image/nav1.png" alt=""></a>
        </div>
        <div class="content">
            <ul>
                <li>
                    <dl>
                        <dd><h1 style="color:#c9975c;">百元红包</h1><br>兴业银行联名卡</dd>
                        <dt><img src="../assets/image/hb1.png" alt=""></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd><h1 style="color:#ffb09a;">超级会员</h1><br>每月领大额红包</dd>
                        <dt><img src="../assets/image/hb2.png" alt=""></dt>
                    </dl> 
                </li>
            </ul>
            <ul>
                <li>
                    <dl>
                        <dd><h1 style="color:#fe9900;">金币商城</h1><br>兴业银行联名卡</dd>
                        <dt><img src="../assets/image/hb3.png" alt=""></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd><h1 style="color:#cd3301;">有红包快抢</h1><br>每月领大额红包</dd>
                        <dt><img src="../assets/image/hb4.png" alt=""></dt>
                    </dl> 
                </li>
            </ul>
            <ul>
                <li>
                    <dl>
                        <dd><h1 style="color:#1aa9e1;">推荐有奖</h1><br>兴业银行联名卡</dd>
                        <dt><img src="../assets/image/hb5.png" alt=""></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd><h1 style="color:#eb6860;">周边优惠</h1><br>每月领大额红包</dd>
                        <dt><img src="../assets/image/hb6.png" alt=""></dt>
                    </dl> 
                </li>
            </ul>
        </div>
        <div class="nav">
            <span><img src="../assets/image/fhb1.png" alt=""></span>
        </div>
        <Footer></Footer>
    </div>
    
</template>

<script>
import Footer from '@/components/Footer'
export default {
    components:{
        Footer
    }
}
</script>

<style scoped lang="less">
.discover{
    margin-bottom: 1.5rem;
}
    .header{
        background: #00a7ff;
        span{
            font-size: 0.5rem;
            padding-left: 0.2rem; 
            color: #fff;
        }
        a{
            display: block;
            height: 3.45rem;
            img{
                width: 100%;
                height: 100%;
            }   
        }
    }
    .content{
        ul{
            display: flex;
            li{
                height: 2.2rem;
                flex: 1;
                border: 0.01rem solid #ccc;
                &:last-child{
                    border-left: none;
                    border-right: none;  
                }
                &:first-child{
                    border-left: none;
                }
                dl{
                    display: flex;
                    justify-content: space-between;
                    dt{
                        margin-top: 0.45rem;
                        margin-right: 0.4rem;
                        height: 1.36rem;
                        width: 1.36rem;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    dd{
                        margin-top: 0.6rem;
                        margin-left: 0.3rem;
                        font-size: 0.32rem;
                        h1{
                            font-size: 0.4rem;
                        }
                    }
                }
            }
        }
    }
    .nav{
        height: 3.95rem;
        background: #f5f5f5;
        span{
            padding: 0.4rem 0;
            display: block;
            height: 3.15rem;
            img{ 
                width: 100%;
                height: 100%;
            }
        }
        
    }
</style>
